  
@import "src/css/mixin";

#VipLevel {
  background: #FFFFFF;

  .icon-return{
    width: .5rem;
    height: .5rem;
    display: block;
    line-height: .5rem;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
  }
  .service-title {
    font-size: 0.17rem;
    line-height: 1;
    text-align: center;
    color: $black;
    height: 0.48rem;
    padding: 0.15rem;
    box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.13);
  }
  .return {  
    float: left;
    font-size: .14rem;
    color: $gray;
    display: block;
    width: .5rem;
    height: .47rem;
    background-color: #fff;
    text-align: center;
    line-height: .5rem;
    position: absolute;
    left: .1rem;
    top: 0;

    .icon-return{
      color: $lightgray;
      position: relative;
      top: 1px;
    }
  }
  .icon-tiepai{
    display: inline-block!important;
    margin-left: 0.05rem;
    color: #864700;
    font-size: .14rem;
  }
  .icon-V2{
    display: inline-block!important;
    color: #A03806;
    font-size: .14rem;
    margin-left: 0.05rem;
  }
  .icon-V3{
    display: inline-block!important;
    margin-left: 0.05rem;
    color: #8B9196;
    font-size: .14rem;
    // float: right;
  }
  .icon-jinpai{
    display: inline-block!important;
    margin-left: 0.05rem;
    color: #d8b729;
    font-size: .14rem;
    // float: right;
  }
  .customer-info{
      background-color: #ffffff;
      color: $black;
      padding: .35rem 0 .43rem 0;
      text-align: center;
      span{
          display: block;
      }
      //头像
      .image-avatar{
          width:.7rem;
          height:.7rem;
          -webkit-border-radius:50%;
          -moz-border-radius:50%;
          border-radius:50%;
          background-color:#ebf0f8;
          margin-bottom:0.18rem;
      }
      .sir{
          font-size: .18rem;
          color: $black;
          letter-spacing: 0;
          line-height: .18rem;
          margin-bottom: .08rem;
      }
      .company{
          font-size: .12rem;
          color: $lightgray;
          letter-spacing: 0;
          line-height: .12rem;
      }
  }
  .level{
    position: relative;
    width: 2.6rem;
    height: .7rem;
    background: #F4F8FF;
    border: 1px solid $blue;
    border-radius: .5rem;
    margin: 0 auto;
    strong{
      font-style: normal;
      font-size: .13rem;
      color: #0F0E10;
      letter-spacing: 0;
      line-height: .2rem;
    }
    .level-score{
      display: inline-block;
      width: .7rem;
      height: .7rem;
      border-radius: 50%;
      background: $blue;
      text-align: center;
      position: relative;
      top: -.01rem;
      i{
        display: inline-block;
        font-style: normal;
        font-size: .24rem;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: .24rem;
      }
      em{
        width: 100%;
        display: inline-block;
        font-style: normal;
        font-size: .12rem;
        color: #FFFFFF;
        letter-spacing: 0;
        top: 50%;
        transform: translate(-50%,-50%);
        position: absolute
      }
    }
    .level-detail{
        width: 1.42rem;
        height: .4rem;
        font-size: .13rem;
        color: $lightgray;
        top: 50%;
        transform: translate(-50%,-50%);
        position: absolute;
        margin-left: .87rem;
    }
  }
  .desc{
    margin-top: .34rem;
    padding-bottom: .3rem;
    .desc-bar{
      height: .44rem;
      background: #F4F8FF;
      i{
        display: inline-block;
        vertical-align: top;
        font-style: normal;
        height: .44rem;
        line-height: .44rem;
        font-size: .13rem;
        color: $lightgray;
        letter-spacing: 0;
      }
    }
  }
  .tab-1{
    padding-top: .1rem;
    margin: 0 -.2rem;
    .lists{
      height: .55rem;
      line-height: .55rem;
      font-size: .14rem;
      color: $gray;
      letter-spacing: 0;
      border-bottom: 1px solid #E3E8EE;
      padding: 0 .2rem;
      // &:last-child{
      //   padding-right: 0;
      // }
      .num{
        display: inline-block;
        height: .24rem;
        width: .24rem;
        background: $blue;
        border-radius: 2px;
        margin-right: .07rem;
        line-height: .24rem;
        text-align: center;
        color: #fff;
      }
      .icon-right{
        font-size: .12rem;
        transform: rotate(0) scale(.75,.75);
        height: .55rem;
        line-height: .55rem;
        width: .2rem;
        text-align: center;
      }
      .left{
        float: left;
      }
      .black-color{
        color: $black;
        font-weight: 600;
      }
    }
  }
  .tab-2{
    .package-spec {
      height: .58rem;
      line-height: .58rem;
      .col-xs-3,.col-xs-6,.col-xs-2,.col-xs-4{
        height: .55rem;
        line-height: inherit;
        font-size: .13rem;
        color: $lightgray;
        letter-spacing: -0.63px;
      }
      .col-xs-6{
        position: relative;
        left: .2rem;
      }
      div {
        padding: 0;
      }
    }
    .package-select {
      height: .55rem;
      line-height: .55rem;
      border-top: 1px solid $linecolor;
      .col-xs-3,.col-xs-6,.col-xs-2,.col-xs-4{
        height: .55rem;
        line-height: inherit;
        font-size: .12rem;
        color: $gray;
        letter-spacing: 0;
        .top-center{
          width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
        }
        span{
          height: .18rem;
          line-height: .18rem;
          display: block;
        }
      }
      .col-xs-6{
        position: relative;
        left: .2rem;
      }
      .lastItem{
        text-indent: .36rem;
      }
      .package-sel-col{
        font-size: .14rem;
        color: #78AAFF;
      }
      div {
        padding: 0;
      }
    }
  }
  .tab-3{
    .title{
      font-size: .14rem;
      color:$gray;
      letter-spacing: 0;
      line-height: .14rem;
      margin: .3rem 0 .19rem 0;
      font-weight: bold;
    }
    p{
      font-size: .14rem;
      color: $gray;
      letter-spacing: 0;
      line-height: .25rem;
      margin: 0;
    }
  }
  .active{
    color: $blue!important;
    font-weight: 600;
    border-bottom: 1px solid $blue;
  }
  .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4{
    padding-left: 20px;
    padding-right: 20px;
  }
}
  
